<template>
	<div>
		<div class="h-h-start-v-center" style="margin-left: 30px;">
			<ButtonGroup v-for="(item,index) in tagList" :key="index">
				<Button @click="getShopList(index)">{{item.name}}</Button>
			</ButtonGroup>
			<Button style="margin-left: 10px;" type="primary" @click="uploadShop">上架</Button>
			<Input @on-change="searchData" style="width: 200px; margin-left: 20px;" suffix="ios-search" type="text" v-model="search"
			 placeholder="搜索内容"></Input>
		</div>
		<nodata v-if="shopListPage.length!=0?false:true"></nodata>
		<div v-if="shopListPage.length!=0?true:false" class="h-h-start-v-center-fw" style="align-content: center;">

			<div v-for="(item,index) in shopListPage" @click="openDetail(item.shop_id)" :key="index" class="shop-box v-v-sb-h-center" style="margin: 30px 20px; margin-bottom: 30px;">
				<div>
					<div style="height: 260px;">
						<img style="width: 100%;" :src="item.picture[0]" alt="">
					</div>
					<h3 style="padding: 0 20px;">{{item.shop_name}}</h3>
				</div>
				<div class="v-h-center-v-start" style="width: 100%; margin-top: 20px; font-size: 15px;align-items: flex-end;height: 100px;">
					<div class="h-h-sb-v-center" style="width: 90%;margin: 10px auto;">
						<div>
							申请人数：<span style="color: #182848;">{{item.apply_sum}}</span>
						</div>
						<div>
							数量：<span style="color: #AA0000;">{{item.sum}}</span>
						</div>
					</div>
					<Progress status="active" :percent="parseInt((item.apply_sum/item.sum)*100)" />
				</div>
			</div>
		</div>
		<Page :current="1" :total="shopList.length" @on-change="changePage" :page-size="pageSize" />
		<Modal v-model="isShowModel" fullscreen title="商品" @on-ok="submit" @on-cancel="closeModel">
			<div style="width: 1000px; height: 1000px;background-color: #fff;margin: 0 auto;">
				<!-- 商品标题，简介，分类，数量，价格，详情，开始时间，截止时间，封面图 -->
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 50px;">商品标题</span>
					<Input v-model="title" value="" type="text" style="width: 80%;" size="large" placeholder="large size" />
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 50px;">商品简介</span>
					<Input v-model=" description" maxlength="100" show-word-limit type="textarea" placeholder="Enter something..."
					 style="width: 80%" />
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px; width: 50px;">分类</span>
					<Select @on-change="changeSelect" v-model="cate" style="width:200px;z-index: 1000;">
						<Option v-for="(item,index) in tagList" :value="index" :key="index">{{ item.name }}</Option>
					</Select>
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 50px;">价格</span>
					<Input v-model="price" value="" type="text" style="width: 30%;" size="large" placeholder="large size" />
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 50px;">数量</span>
					<div style="width: 50%;">
						<Slider v-model="applySum"></Slider>
					</div>
					<Input v-model=" applySum" style="width: 50px;margin-left: 30px;" type="number"></Input>
				</div>
				<div style="margin-bottom: 30px;" class="h-hv-start">
					<span style="margin-right: 20px;width: 50px;">详情</span>
					<mavon-editor class="markdown" @change="transformHtml":defaultOpen="defaultOpen" :ishljs="true"  :zIndex="0" :subfield="false" ref=md  :value="content"></mavon-editor>
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 70px;">上传封面图</span>
					<Upload style="width: 50%;" :multiple='false' type="drag" :action="action" :on-success="success1">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>建议图片比例为2：1</p>
						</div>
					</Upload>
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 70px;">上传商品图</span>
					<Upload style="width: 50%;" :multiple='false' type="drag" :action="action" :on-success="success2">
						<div style="padding: 20px 0">
							<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
							<p>建议图片为白底</p>
						</div>
					</Upload>
				</div>
				<div style="margin-bottom: 30px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 100px;">开始时间</span>
					<Col span="12">
					<DatePicker @on-change='changeCreateTime' type="datetime" :value="createTime" placeholder="Select date" style="width: 200px"></DatePicker>
					</Col>

				</div>
				<div style="margin-bottom: 30px;height: 100px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 100px;">结束时间</span>
					<Col span="12">
					<DatePicker @on-change='changeLimitTime' :value="endTime" type="datetime" placeholder="Select date" style="width: 200px"></DatePicker>
					</Col>
				</div>
				<div style="margin-bottom: 30px;height: 100px;" class="h-h-start-v-center">
					<span style="margin-right: 20px;width: 100px;">是否删除</span>
					<Col span="12">
					<Avatar @click.native="deleteShop" class="delete-btn" icon="md-trash" size="large" />
					</Col>
				</div>
				<!-- <Icon type="md-trash" /> -->

				<div style="margin-bottom: 100px;" class="h-h-start-v-center">

				</div>

			</div>
		</Modal>
	</div>
</template>
<script>
	import {
		SERVER_URL
	} from '../../../../static/config.js'
	import TurndownService from 'turndown'
	import {
		getShopList,
		getAllShopCate,
		addShop,
		getShopOne,
		updateShop,
		deleteShop
	} from '../../../../API/index.js'
	export default {
		data() {
			return {
				tagList: [],
				isShowModel: false,
				split3: 0.5,
				split4: 0.5,
				sum: 0,
				price: "",
				valueHtml: '',
				// content: '',
				shopList: [],
				shopListPage: [],
				pageSize: 10,
				// uploadInfo:{
				title: "",
				description: "",
				cate: '',
				applySum: 0,
				content: '',
				picture: [],
				pictureOld: [],
				createTime: "",
				endTime: "",
				isUpdate: false,
				activeId: "",
				// },
				search: "",
				action: SERVER_URL + '/api/upload'
			};
		},
		computed: {

		},
		async created() {
			await this.getAllShopCate()
			await this.getShopList()
		},
		methods: {
			searchData: function() {
				var search = this.search;
				var searchData1
				if (this.search == '') {
					this.getShopList()
				} else {
					searchData1 = this.shopList.filter(value => value.shop_name.indexOf(this.search) !== -1)
					this.shopList = searchData1
					this.changePage(1)
				}
				console.log(this.search, this.shopListPage)


			},
			openDetail(id) {
				this.activeId = id
				this.isShowModel = true
				this.isUpdate = true
				let data = {
					id: id
				}
				getShopOne(data).then(res => {
					console.log(res)
					this.title = res.data.data[0].shop_name
					this.description = res.data.data[0].introduction
					this.cate = parseInt(res.data.data[0].shop_cate_id) - 1
					// this.cate = res.data.data[0].shop_cate_name
					this.applySum = parseInt(res.data.data[0].sum)
					this.price = parseInt(res.data.data[0].price)
					
					var turndownService = new TurndownService()
					this.content = turndownService.turndown(res.data.data[0].content)
					// this.content = res.data.data[0].content
					this.pictureOld = this.$stringToArray(res.data.data[0].picture)
					this.createTime = res.data.data[0].create_time
					this.endTime = res.data.data[0].limit_time
					console.log(this.title, this.description, this.cate, this.applySum, this.price, this.content, this.picture, this
						.createTime, this.endTime)
					console.log(this.cate)
					this.$forceUpdate()
				})
			},
			transformHtml(e, reder) {
				console.log(e, reder);
				this.valueHtml = reder;
				// console.log(this.valueHtml);
			},
			getAllShopCate() {
				return new Promise((resolve) => {
					getAllShopCate().then(res => {
						console.log(res)
						this.tagList = res.data.data
						resolve()
					})
				})
			},
			getShopList(index) {
				this.$Loading.start();
				console.log(index)
				return new Promise((resolve) => {
					if (index != undefined) {
						var data = {
							id: this.tagList[index].cate_id
						}
					} else {
						var data = {
							id: 1
						}
					}
					getShopList(data).then(res => {
						console.log(res)
						this.shopList = res.data.data
						for (var i = 0; i < this.shopList.length; i++) {
							this.shopList[i].picture = this.$stringToArray(this.shopList[i].picture)
						}
						this.changePage(1)
						console.log(this.shopList)
						this.$forceUpdate()
						resolve()
					})
				})
			},
			changePage(e) {
				console.log(e)
				let begin = this.pageSize * (e - 1)
				let end = begin + this.pageSize
				var shopListToString = this.shopList.slice(0)
				console.log(begin, end)
				this.shopListPage = shopListToString.splice(begin, end)
				this.$Loading.finish();
			},
			changeCreateTime(time, type) {
				console.log(time, type)
				this.createTime = time
			},
			changeLimitTime(time, type) {
				console.log(time, type)
				this.endTime = time
			},
			success1(res, file, flieList) {
				console.log(res.imageUrl)
				this.picture.push(res.imageUrl)
			},
			success2(res, file, flieList) {
				this.picture.push(res.imageUrl)
			},
			uploadShop() {
				this.isShowModel = true
				this.isUpdate = false
			},
			submit(id) {
				this.$Spin.show();
				var cate_id = ''
				// this.tagList.forEach((item,index,array)=>{
				// 	if(this.cate==item){
				// 		cate_id = index
				// 	}
				// })
				var picture = this.picture.join(',')

				if (this.isUpdate == true) {
					if (this.picture.length == 0) {
						var pic = this.pictureOld
					} else {
						var pic = this.picture
					}
					var data = {
						'shop_name': this.title,
						'sum': this.applySum,
						'price': parseInt(this.price),
						'content': this.valueHtml,
						'shop_cate_id': this.tagList[this.cate].cate_id,
						'shop_cate_name': this.tagList[this.cate].name,
						'picture': pic,
						'create_time': this.createTime,
						'limit_time': this.endTime,
						'introduction': this.description,
						'shop_id': this.activeId
					}
					console.log(data)
					updateShop(data).then(res => {
						this.$Spin.hide();
						console.log(res)
					})
				} else {
					var data = {
						'shop_name': this.title,
						'sum': this.applySum,
						'price': parseInt(this.price),
						'content': this.valueHtml,
						'shop_cate_id': this.tagList[this.cate].cate_id,
						'shop_cate_name': this.tagList[this.cate].name,
						'picture': picture,
						'create_time': this.createTime,
						'limit_time': this.endTime,
						'introduction': this.description,
						'status':0,
					}
					console.log(data)
					addShop(data).then(res => {
						this.$Spin.hide();
						console.log(res)
					})
				}

			},
			closeModel() {
				this.title = ""
				this.description = ""
				// this.cate.cate_id = res.data.data[0].shop_cate_id
				this.cate = ""
				this.applySum = ""
				this.price = ""
				this.content = ""
				this.pictureOld = []
				this.createTime = ""
				this.endTime = ""
			},
			changeSelect(e) {
				console.log(e)
				console.log(this.cate)
			},
			deleteShop() {
				this.$Modal.confirm({
					title: '提示',
					content: '<p>确定要删除此商品吗？</p>',
					onOk: () => {
						let data = {
							shop_id:this.activeId
						}
						deleteShop(data).then(res=>{
							console.log(res)
						})
						this.$Message.info('成功删除');
						this.isShowModel = false
					},
					onCancel: () => {
						this.$Message.info('已取消');
					}
				});
			}
		},
	};
</script>
<style scoped>
	.shop-box {
		width: 250px;
		height: 420px;
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		/* padding-bottom: 30px; */
	}

	.demo-split {
		height: 200px;
		border: 1px solid #dcdee2;
	}

	.demo-split-pane {
		padding: 10px;
	}

	.demo-split-pane.no-padding {
		height: 200px;
		padding: 0;
	}

	.markdown {
		height: calc(50vh);
		z-index: 1;
		/* width: 880px; */
	}

	.delete-btn:hover {
		background-color: #aa0000;
	}
</style>
